<template>
    <div class="c-h5-now__cond">
        <p class="c-h5-now-cond__tmp">{{ now.tmp }}°</p>
        <div class="c-h5-now-cond__weather">
            <img :src="'https://widget-s.qweather.net/img/plugin/190516/icon/c/' + now.cond_code + 'd.png'">
            <span>{{ now.cond_txt }}</span>
        </div>
        <div class="c-h5-now-cond__air">

            <span>{{ air_now_city.qlty }}</span>
            <span :class="'air-level--' + AirLevel">{{ air_now_city.aqi }}</span>

        </div>
    </div>
</template>
<script>
export default {
    props: ['air_now_city', 'now'],
    data() {
        return {}
    },
    computed: {
        AirLevel() {
            const getAirLevel = (t) => (t = parseInt(t)) <= 50 ? 1 : t <= 100 ? 2 : t <= 150 ? 3 : t <= 200 ? 4 : t <= 300 ? 5 : 6
            return getAirLevel(this.air_now_city.aqi)
        },
    }
}
</script>
<style scoped>
.c-h5-now-cond__tmp {
    font-size: 60px;
    color: white;
    margin-top: 50px;
    margin: 0;
    flex: 1;
}

.c-h5-now__cond {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.c-h5-now-cond__weather img {
    width: 50px;
    margin-right: 10px;
}

.c-h5-now-cond__weather {
    color: white;
    font-size: 20px;
    margin-top: 28px;
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.air-level--1 {
    color: #95B359 !important
}

.air-level--2 {
    color: #A9A538 !important
}

.air-level--3 {
    color: #E0991D !important
}

.air-level--4 {
    color: #D96161 !important
}

.air-level--5 {
    color: #A257D0 !important
}

.air-level--6 {
    color: #D94371 !important
}
.c-h5-now-cond__air {
    color: white;
    font-size: 24px;
    margin-top: 10px;
    position: relative;
    display: inline-block;
    padding: 10px;
    border-radius: 7px;
    overflow: hidden;
}

.c-h5-now-cond__air span {
    margin-right: 10px;
}

.c-h5-now-cond__air:before {
    content: "";
    background: white;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.3;
    top: 0;
    left: 0;
}
</style>